<template>
    <div>
        <!-- 查询 -->
        <el-form ref="selectForm" :model="queryParams" :inline="true">

        </el-form>
        <!-- 新增 -->
        <div>
            <el-button type="primary" plain icon="el-icon-plus" @click="handleAddRole">新增
            </el-button>
        </div>
        <!-- 查询结果列表 -->
        <el-table :data="roleListData" style="width: 100%">
            <el-table-column type="selection" width="50" align="center"/>
            <el-table-column label="角色名称" align="center" prop="roleName"></el-table-column>
            <el-table-column label="权限字符" align="center" prop="roleKey"></el-table-column>
            <el-table-column label="状态" align="center" width="100">
                <template v-slot="scope">
                    <el-switch
                            v-model="scope.row.status"
                            active-value="0"
                            inactive-value="1"
                            @change="handleRoleStatus(scope.row)"
                    ></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="角色描述" align="center" prop="roleDesc"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
            <el-table-column label="操作" align="center" width="290px">
                <template v-slot="scope">
                    <el-button icon="el-icon-edit"
                               @click="handleUpdateRole(scope.row)">修改
                    </el-button>
                    <el-button icon="el-icon-delete"
                               @click="handleDeleteRole(scope.row)">删除
                    </el-button>
                    <el-dropdown style="margin-left: 10px"
                                 @command="(command) => handleCommand(command, scope.row)">
                        <el-button type="primary">
                           更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="menuPermission" icon="el-icon-circle-check">菜单权限
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增或修改角色组件 -->
        <update-role :title="title" :status-options="statusOptions" :form="sysRole"
                     :open="open" v-on:dialogStatusChanged="changeDialogStatus($event)">
        </update-role>
        <!-- 分配菜单权限 -->
        <menu-permission :title="menuPermissionTitle" :open="menuPermissionOpen" :form="menuPermission"
                         v-on:menuPermissionStatusChanged="changeMenuPermissionStatus($event)">
        </menu-permission>
    </div>
</template>

<script>
    import {getRoleList, deleteRole} from '/src/api/system/role'
    import UpdateRole from './update.vue'
    import menuPermission from './menuPermission.vue'

    export default {
        name: "index",
        components: {
            UpdateRole,
            menuPermission
        },
        data() {
            return {
                //弹出框状态
                open: false,
                //查询参数
                queryParams: {},
                dateRange: [],
                //查询结果
                roleListData: [],
                total: 0,
                // 状态数据字典
                statusOptions: [],
                //新增或修改
                title: '',
                //每一行的数据
                sysRole: {},
                //分配菜单权限
                menuPermissionOpen: false,
                menuPermissionTitle: '',
                menuPermission: {},
            }
        },
        created() {
            this.init()
        },
        methods: {
            //初始化
            init() {
                this.getRoleListByParam()
                this.getDicts("sys_normal_disable").then(response => {
                    this.statusOptions = response.data;
                });
            },
            //查询角色列表
            getRoleListByParam() {
                getRoleList(this.addDateRange(this.queryParams, this.dateRange)).then(
                    response => {
                        this.roleListData = response.rows
                        this.total = response.total
                    }
                )
            },
            //修改角色状态
            handleRoleStatus(row) {

            },
            //修改角色信息
            handleUpdateRole(row) {
                this.sysRole = row
                this.title = '修改角色信息'
                this.open = true
            },
            //删除角色信息
            handleDeleteRole(row) {
                const roleIds = row.roleId
                this.$confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    return deleteRole(roleIds)
                }).then(() => {
                    this.getRoleListByParam()
                    this.msgSuccess('删除成功')
                })
            },
            //新增角色信息
            handleAddRole() {
                this.sysRole = {status: '0'}
                this.title = "新增角色信息"
                this.open = true
            },
            //更改弹出框的状态
            changeDialogStatus(status) {
                this.open = status
                this.getRoleListByParam()
            },
            //定义下拉菜单事件
            handleCommand(command, row) {
                switch (command) {
                    case "menuPermission":
                        this.handleMenuPermissions(row);
                        break;
                    default:
                        break;
                }
            },
            //分配菜单权限
            handleMenuPermissions(row) {
                this.menuPermissionOpen = true
                this.menuPermissionTitle = '分配菜单权限'
                this.menuPermission = row
            },
            //更改弹出框的状态
            changeMenuPermissionStatus(status){
                this.menuPermissionOpen = status
            }
        }
    }
</script>

<style scoped>

</style>
